<template>
  <z-paging v-model="list" ref="paging" @query="getArtCates" auto-show-system-loading>
    <view class="news-list">
      <view v-for="item in list" :key="item.id">{{ item.title }}</view>
    </view>
  </z-paging>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getArtCatesApi } from "../../api/scroll-paging";
const list = ref();
const paging = ref();
function getArtCates(pageNo: number, pageSize: number) {
  getArtCatesApi({
    pageSize: pageSize,
    pageNum: pageNo
  })
    .then((res) => {
      paging.value.complete(res.data.data);
    })
    .catch(() => {
      paging.value.complete(false);
    });
}
</script>

<style lang="scss" scoped>
.news-list {
  width: 100%;
  background-color: powderblue;
}
</style>
